<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html" xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:body>
        <ui:composition template="./template.xhtml">
            <ui:define name="content">
                <script type="text/javascript" src="_js/admin.js"></script>
                Seja bem vindo ao painel administrativo

                <h2 id="nav-tabs">Painel administrativo</h2>
                <div class="bs-example">
                    <ul class="nav nav-tabs" style="margin-bottom: 15px;">
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Plataformas <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#plataformas" data-toggle="tab">Visualizar</a></li>
                                <li class="divider"></li>
                                <li><a href="#addPlataforma" data-toggle="tab">Nova</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Categorias <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#categorias" data-toggle="tab">Visualizar</a></li>
                                <li class="divider"></li>
                                <li><a href="#addCategoria" data-toggle="tab">Nova</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Jogos <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#jogos" data-toggle="tab">Visualizar</a></li>
                                <li class="divider"></li>
                                <li><a href="#addJogo" data-toggle="tab">Novo</a></li>
                            </ul>
                        </li>
                        <li class=""><a href="#usuarios" data-toggle="tab">Usuários</a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in" id="plataformas">
                            <div class="bs-example">
                                <h3>plataformas</h3>
                                <table class="table table-striped table-bordered table-hover">
                                    <tbody id="plataformabox"></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="addPlataforma">
                            <span class="label label-default">nova plataforma</span>
                            <br /><br />
                            <div class="input-group">
                                <span class="input-group-addon">titulo</span>
                                <input type="text" id="p_titulo" class="form-control" placeholder="digite o titulo" />
                            </div>
                            <button type="submit" id="p_submit" class="btn btn-success" style="float: right;">Salvar</button>
                            <button type="reset" class="btn btn-warning" style="float: right; margin-right: 10px;">Limpar</button>
                        </div>
                        <div class="tab-pane fade in" id="categorias">
                            <div class="bs-example">
                                <h3>categorias</h3>
                                <table class="table table-striped table-bordered table-hover">
                                    <tbody id="categoriabox">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="addCategoria">
                            <span class="label label-default">nova categoria</span>
                            <br /><br />
                            <div class="input-group">
                                <span class="input-group-addon">titulo</span>
                                <input type="text" id="c_titulo" class="form-control" placeholder="digite o titulo" />
                            </div>
                            <button type="submit" id="c_submit" class="btn btn-success" style="float: right;">Salvar</button>
                            <button type="reset" class="btn btn-warning" style="float: right; margin-right: 10px;">Limpar</button>
                        </div>
                        <div class="tab-pane fade in" id="jogos">
                            <div class="bs-example">
                                <h3>jogos</h3>
                                <table class="table table-striped table-bordered table-hover">
                                    <tbody id="jogobox">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade in" id="addJogo">
                            <span class="label label-default">novo jogo</span>
                            <br /><br />
                            <div class="input-group">
                                <span class="input-group-addon">titulo</span>
                                <input type="text" id="j_titulo" class="form-control" placeholder="digite o titulo" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">valor</span>
                                <input type="text" id="j_valor" class="form-control" placeholder="digite o preço do jogo" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">capa</span>
                                <input type="text" id="j_url" class="form-control" placeholder="digite a url da capa" />
                            </div>
                            
                            <div class="input-group">
                                <span class="input-group-addon">plataforma</span>
                                <select id="j_plataforma">
                                    <option>- selecione -</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">categoria</span>
                                <select id="j_categoria">
                                    <option>- selecione -</option>
                                </select>
                            </div>
                            <button type="submit" id="j_submit" class="btn btn-success" style="float: right;">Salvar</button>
                            <button type="reset" class="btn btn-warning" style="float: right; margin-right: 10px;">Limpar</button>
                        </div>
                        <div class="tab-pane fade" id="usuarios">
                            <span class="label label-default">novo usuário</span>
                            <br /><br />
                            <div class="input-group">
                                <span class="input-group-addon">nome</span>
                                <input type="text" class="form-control" placeholder="digite seu nome" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">sobrenome</span>
                                <input type="text" class="form-control" placeholder="digite seu sobrenome" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">usuário</span>
                                <input type="text" class="form-control" placeholder="nome que deseja ser chamado" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">e-mail</span>
                                <input type="text" class="form-control" placeholder="digite seu e-mail" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">senha</span>
                                <input type="password" class="form-control" placeholder="digite sua senha" />
                            </div>
                            <div class="input-group">
                                <span class="input-group-addon">re-senha</span>
                                <input type="password" class="form-control" placeholder="digite sua senha novamente" />
                            </div>
                            <button type="submit" class="btn btn-success" style="float: right;">Salvar</button>
                            <button type="reset" class="btn btn-warning" style="float: right; margin-right: 10px;">Limpar</button>
                        </div>
                    </div>
                </div>
            </ui:define>
        </ui:composition>
    </h:body>
</html>